/**
* @description: 会议巡视列表 
**/
<template>
  <view class="todo-task-main">
    <nav-bar class="header" back :title="title" @goBack="goBack"/>
    <view class="main-container">

      <view class="header-bar">
        <!-- 切换tab -->
        <view class="get-state-tab">
          <view class="info-tab-item" :class="currentTab === 'non-finish' ? 'info-tab-current': ''" @click="tabChange('non-finish')">待完成的</view>
          <view class="info-tab-item" :class="currentTab === 'finish' ? 'info-tab-current': ''" @click="tabChange('finish')">我完成的</view>
        </view>
      </view>
      <!-- 搜索框  -->
      <view class="search" >
        <van-search disabled show-action v-model="searchValue"
          left-icon="" action-text="重置"
          right-icon="search" placeholder="搜索"
          @click="showSearch=true" @cancel="onSearch('')" />
      </view>
      <template v-if="taskList.length>0">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="isLoading"
            :finished="finished"
            finished-text="没有更多了"
            @load="loadMore"
          >
            <!-- 列表循环   -->
            <view class="todo-list" v-for="(item,index) in taskList" :key="index"  @click="toReceive(item)">
              <view class="todo-title">
                <img src="../../static/img/tasktime.png" alt="">
                <text class="todo-main-title">{{ item.name }}</text>
                <view class="todo-btn" v-if="item.status == 0">巡视</view>
              </view>
            </view>
          </van-list>
        </van-pull-refresh>
      </template>
     
    </view>

      <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <search-equ-match @cancel="showSearch = false;" @search="onSearch" :empty="showSearch"/>
    </van-popup>
  </view>
</template>

<script>
import baseConfig from "../../common/config";

import navBar from "../../components/common/nav-bar";
import plateTitle from "../../components/business/plateTitle";
import searchEquMatch from '../common/searchEquMatch'

import moment from "moment";
import {mapGetters} from "vuex";
import {Dialog} from "vant";
var orignList = [
  { name: 'B207会议室', status: 0 },
  { name: 'A206会议室', status: 1 },
  { name: 'B307会议室', status: 1 },
  { name: 'A302会议室', status: 1 },
  { name: 'A310会议室', status: 0 },
  { name: 'D303会议室', status: 0 },
  { name: '1层东大厅', status: 0 },
]
export default {
  name: "todoTask",
  components: { navBar, plateTitle, searchEquMatch },
  data() {
    return {
    
      taskInfoData: [],
      patrolList:[],
      title: '会议巡视列表',
      currentTab: 'finish',
      taskStae: 2,
      taskSiteId:'', // 巡视进度跳转携带站点id
      taskSiteName: '', // 巡视进度跳转携带站点名称

      searchValue: "",
      showScreen: false,
      showSearch: false,
      taskList:[],
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: false,
      total: 0, // 总条数
      page: 1,
      limit: 20,
      originFlag: false  //  true 个人中心管理进来的  false 待办工单进来的

    }
  },
  onLoad(e) {
    this.originFlag = e.origin&&e.origin=='mine'?true:false
    if (e.status&&e.status=='finish') {
      this.tabChange('finish')
    } else {
      this.tabChange('non-finish')
    }
  },
  computed: {
    ...mapGetters(['userData'])
  },
  methods: {
    onSearch(searchValue) {
      this.searchValue = searchValue;
      this.onRefresh();
      this.showSearch = false;
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.page = 1;
      this.taskList = [];
      this.getTaskListByTodoT();
    },
    loadMore() {
      if (this.total > this.taskList.length) {
        this.page = this.page + 1;
        this.getTaskListByTodoT();
      } else {
        this.finished = true;
      }
    },
    // jump(item){
    //   uni.navigateTo({
    //     url: `/pages/autumnInspection/taskMonitor/detail?objId=${item.objId}&inletType=1`
    //   });
    // },
    getTaskListByTodoT() {
      let params = {
        userId: this.userData.userId,
        pageSize: this.limit,
        pageCurr: this.page,
        taskState: this.taskStae,
        name: this.searchValue,
        interfaceType: 1
      }
      this.$apiRequest.qjqcApi.getAutumnInspectionTaskListInfo(params).then(res => {
        this.isLoading = false;
        this.refreshing = false;

        this.taskList = this.taskList.concat(res.data.list.map(item => {
          return{
            tmsStartTimS: item.tmsStartTim ? moment(item.tmsStartTim).format('YYYY-MM-DD HH:mm') :null,
            tmsEndTimS: item.tmsEndTim ? moment(item.tmsEndTim).format('YYYY-MM-DD HH:mm') : null,
            ...item
          }
        }));
       

        if (this.taskStae === 2) {
          this.total = res.data.num.noFinshNum
        } else {
          this.total = res.data.num.finshNum
        }
      })
    },
    goBack() {
			baseConfig.actions.exitIgw();
    },
    tabChange(flag){
      this.currentTab = flag
      this.taskList = []
      if (flag === 'non-finish') {
        this.taskStae = 2
        // this.title = '待完成的-工单列表'
        this.taskList = orignList.filter(e => (e.status==0))
      } else {
        this.taskStae = 99
        // this.title = '我完成的-工单列表 '
        this.taskList = orignList.filter(e => (e.status==1))
      }
      
      // this.getTaskListByTodoT()
      
    },
    
    toReceive(item) {
      console.log('111', item)
      if (item.status == 1){
        uni.navigateTo({
          url: `/pages/inspectionMeeting/deviceList/index?s=1`,
        })
      } else if (item.status == 0){
        uni.navigateTo({
          url: `/pages/inspectionMeeting/deviceList/index?s=0`,
        })
      }
    },
    
  }
};
</script>

<style scoped lang="scss">
.todo-task-main {
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  .main-container {
    min-height: calc(100vh - #{px2vh(283)});
    padding: px2vh(30) auto px2vw(30);
    background-color: #F8F8F8;
    
    /deep/.van-field__label, 
    /deep/.van-field__control,
    /deep/.van-field__control:read-only {
      font-size: px2vw(42);
    }
    .plate-title-1 {
      margin-top: px2vh(30);
      margin-bottom: px2vh(27);
    }
    .task-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;
      
      .operation {
        margin-left: px2vw(30);
        img {
          width: px2vw(28);
          height: px2vh(41);
          vertical-align: middle;
        }
      }
    }
    .plate-title-2 {
      margin-top: px2vh(60);
      margin-bottom: px2vh(27);
    }
    .patrol-info-container .patrol-item {
      width: px2vw(1020);
      //height: px2vh(313);
      background: #fff;
      border-radius: $border-radius-base;
      overflow: hidden;
      margin-bottom: px2vh(30);
      padding-bottom: px2vh(30);
      .progesss-top {
        //width: px2vw(920);
        height: px2vh(172);
        margin: 0 px2vw(50);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .progess-left {
          display: flex;
          align-items: center;
  
          img {
            width: px2vw(68);
            height: px2vw(68);
            //margin-top: px2vh(55);
            //float:left;
          }
  
          .progess-title {
            color: #666;
            //float: left;
            font-size: px2vw(42);
            margin-left: px2vw(20);
            //margin-top: px2vh(58);
            //line-height: px2vh(62);
          }
        }
        .progess-right {
          //width: px2vw(258);
          font-size: px2vw(42);
          //line-height: px2vh(62);
          //margin-top: px2vh(55);
          //float: right;
          display: flex;
          align-items: center;
          .patrol-btn {
            margin-left: px2vw(30);
            padding: 0 6px;
            width: px2vw(160);
            height: px2vh(68);
            background: #417ADC;
            //float: right;
            border-radius: px2vw(40) px2vh(40);
          }
          .patrol-btn:not(:first-child) {
            margin-left: px2vw(10);
          }
        }
        .processColor {
          color: #FF4355;
        }
        .processColor2 {
          color: #FFAD0E;
        }
      }
      .progess-hr {
        width: px2vw(920);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
      }
      .progesss-bottom {
        width: px2vw(920);
        margin-left: px2vw(50);
        //height: px2vh(138);
        font-size: px2vw(36);
        display: flex;
        padding: px2vh(30) 0 0;
        .progress-title {
          width: px2vw(190);
          display: inline-block;
          //margin-top: px2vh(58);
          color: #666;
        }
        .progress-main {
          flex: 1;
          display: inline-block;
          //margin-top: px2vh(58);
          color: #333;
        }
      }
    }

    .header-bar {
      flex-shrink: 0;
      // height: px2vh(220);
      background: #417adc;
      overflow: hidden;
      margin-top: px2vh(-1);
      position: sticky;
      top: px2vh(158);
      z-index: 9;
      .get-state-tab {
        width: calc(100% - #{px2vw(60)});
        height: px2vh(90);
        border-radius: px2vw(20);
        box-sizing: border-box;
        margin: px2vh(20) px2vw(30) px2vh(20);
        background-color: rgba(255, 255, 255, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        border: px2vw(1) solid rgba(198, 215, 245, 1);
        .info-tab-item {
          width: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: rgba(255, 255, 255, 1);
          font-weight: bold;
          font-size: px2vw(38);
          &.info-tab-current {
            height: px2vh(80);
            margin: 0 px2vw(4);
            margin-right: px2vw(10);
            border-radius: px2vw(20);
            background-color: rgba(255, 255, 255, 0.7);
            color: rgba(65, 122, 220, 1);
            font-weight: Bold;
          }
        }
      }
    }

  .search {
      width: px2vw(1020);
      height: 38px;
      margin: px2vw(30) px2vh(30);
      border-radius: px2vw(20);
      overflow: hidden;

      .van-search {
        padding: 0 0;
        height: 38px;
      }

      .van-search__content {
        background: #fff;
        height: 38px;
      }

      /deep/ .van-field__control {
        height: 30px;
      }
    }

    .todo-list {
      width: px2vw(1020);
      //height: px2vh(520);
      background: #fff;
      border-radius: px2vw(20) px2vh(20);
      padding-bottom: px2vw(30);
      margin: 0  px2vw(30) px2vh(30) px2vw(30) ;
      .todo-title {
        width: px2vw(940);
        height: px2vh(80);
        margin-left: px2vw(40);
        padding-top: px2vw(30);
        margin-bottom: px2vh(30);
        img {
          width: px2vw(64);
          height: px2vw(64);
          margin-top: px2vh(12);
          float: left;
        }
        .todo-main-title {
          width: px2vw(600);
          margin-left: px2vw(20);
          margin-top: px2vh(8);
          font-size: px2vh(48);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          float: left;
        }
        .todo-btn {
          width: px2vw(170);
          height: px2vh(60);
          line-height: px2vh(60);
          text-align: center;
          margin-top: px2vh(12);
          background: #417ADC;
          color: #fff;
          font-size: px2vw(42);
          float: right;
          border-radius: px2vw(20) px2vh(20);
        }
      }
      .todo-hr {
        width: px2vw(940);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
        margin-bottom: px2vh(42);
      }
      .top-todo-main {
        width: px2vw(900);
        font-size: px2vh(36);
        line-height: px2vh(62);
        margin-left: px2vw(60);
        .todo-big-ltitle,.todo-big-rtitle {
          color: #666;
        }
        .todo-small-ltitle,.todo-small-rtitle {
          margin-left: px2vw(25);
          color: #333;
        }
        .todo-big-rtitle {
          margin-left: px2vw(245);
        }
      }
    }
  }
}
</style>